<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据可视化</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>
	<body>
		<header class="header">
			<h1>可视化展板-ECharts</h1>
			<div class="showTime"></div>
		</header>
		<section class="mianbox">
			<div class="column">
				<div class="panel bar">
					<h2>柱形图-就业行业</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line">
					<h2>柱形图-就业行业
					<a href="javascript:;">2020</a>
					<a href="javascript:;">2021</a>
					</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie">
					<h2>柱形图-就业行业</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="column">
				<div class="no">
					<div class="no-hd">
						<ul>
							<li>56461651</li>
							<li>20000</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>前端需求人数</li>
							<li>市场供应人数</li>
						</ul>
					</div>
				</div>
				<div class="map">
					<div class="map1"></div>
					<div class="map2"></div>
					<div class="map3"></div>
					<div class="char"></div>
				</div>
			</div>
			<div class="column">
				<div class="panel bar2">
					<h2>柱形图-就业行业</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line2">
					<h2>柱形图-就业行业</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie2">
					<h2>柱形图-就业行业</h2>
					<div class="char">11</div>
					<div class="panel-footer"></div>
				</div>
			</div>
		</section>
	</body>
	<!-- 80px=1rem -->
	<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-rc.1/echarts.min.js"></script> -->
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script> -->
	<script src="./js/china.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var t = null;
		t = setTimeout(time, 1000); //開始运行
		function time() {
			clearTimeout(t); //清除定时器
			dt = new Date();
			var y = dt.getFullYear();
			var mt = dt.getMonth() + 1;
			var day = dt.getDate();
			var h = dt.getHours(); //获取时
			var m = dt.getMinutes(); //获取分
			var s = dt.getSeconds(); //获取秒
			document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s +
				"秒";
			t = setTimeout(time, 1000); //设定定时器，循环运行     
		}
	</script>
	
</html>
